<template>
    <div>
        <div class="demo">
            输入示例：
            <span style="background-color: #e92;">#ee9922</span>&nbsp;
            <span style="background-color: rgb(255 100 97);color: white;">255,100,97</span>&nbsp;
            <span style="background-color: rgb(255 100 97 / 50%);color: white;">255,100,97,.5</span>&nbsp;
            <span style="background-color: rgb(238 153 34 / 50%);color: white;">#80ee9922</span> &nbsp;
        </div>
        <input v-model="state.value" @keydown.enter="transfer">
    </div>
</template>

<script lang="ts">
export default { name: '' }
</script>

<script lang="ts" setup>
import { getCurrentInstance, ComponentInternalInstance, reactive, ref, nextTick, onMounted, useAttrs, useSlots } from 'vue'

import colorTransfer from '@/utils/colorTransfer'
// const slots = useSlots()
// const attrs = useAttrs()
// const emits = defineEmits()
const { proxy } = getCurrentInstance() as ComponentInternalInstance

console.log(colorTransfer)

const state = reactive({
    value: '',
})

const transfer = () => {
    console.log(colorTransfer(state.value))
}

// defineExpose({

// })
</script>
<style lang="scss" scoped>

</style>
